<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="icon" type="image/png" sizes="32x32" href="/zen/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/zen/favicon-16x16.png">
    <title>Zen Documentation</title>
    <meta name="description" content="A minimal, clean space for your thoughts. Store notes securely in Markdown format within a local SQLite database.">
    <link rel="stylesheet" href="base16-google-light.css">

    <style>
        /* https: //www.joshwcomeau.com/css/custom-css-reset/ */

        /* 1. Use a more-intuitive box-sizing model */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        /* 2. Remove default margin */
        * {
            margin: 0;
        }

        body {
            /* 3. Add accessible line-height */
            line-height: 1.5;
            /* 4. Improve text rendering */
            -webkit-font-smoothing: antialiased;
        }

        /* 5. Improve media defaults */
        img,
        picture,
        video,
        canvas,
        svg {
            display: block;
            max-width: 100%;
        }

        /* 6. Inherit fonts for form controls */
        input,
        button,
        textarea,
        select {
            font: inherit;
        }

        /* 7. Avoid text overflows */
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            overflow-wrap: break-word;
        }

        /* 8. Improve line wrapping */
        p {
            text-wrap: pretty;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-wrap: balance;
        }

        /*
        9. Create a root stacking context
        */
        #root,
        #__next {
            isolation: isolate;
        }

        :root {
            /* https://tailwindcss.com/docs/colors */
            /* https://gist.github.com/guvener/d8952570d5a8be430580b93800519439 */
            --neutral-50: #FAFAFA;
            --neutral-100: #F5F5F5;
            --neutral-200: #E5E5E5;
            --neutral-300: #D4D4D4;
            --neutral-400: #A3A3A3;
            --neutral-500: #737373;
            --neutral-600: #525252;
            --neutral-700: #404040;
            --neutral-800: #262626;
            --neutral-900: #171717;
            --red-600: #DC2626;
            --red-700: #B91C1C;
            --yellow-100: #FEF9C3;

            /* typography */
            /* Major Second */
            --font-scale: 1.125;
            --font-family: ui-sans-serif, system-ui, sans-serif;
            --font-family-code: ui-monospace, monospace;
            /* 1rem * pow(var(--font-scale), 6) */
            --h1: 600 2.027rem/1.2 var(--font-family);
            /* 1rem * pow(var(--font-scale), 5) */
            --h2: 600 1.802rem/1.2 var(--font-family);
            /* 1rem * pow(var(--font-scale), 4) */
            --h3: 600 1.602rem/1.2 var(--font-family);
            /* 1rem * pow(var(--font-scale), 3) */
            --h4: 600 1.424rem/1.2 var(--font-family);
            /* 1rem * pow(var(--font-scale), 2) */
            --h5: 600 1.266rem/1.2 var(--font-family);
            /* 1rem * pow(var(--font-scale), 1) */
            --h6: 600 1.125rem/1.2 var(--font-family);
            /* https://m3.material.io/styles/typography/applying-type */
            --p1: normal 1rem/1.5 var(--font-family);
            /* 1rem / var(--font-scale) */
            --sm: normal 0.889rem/1.4 var(--font-family);
            --code: normal 0.889rem/1.4 var(--font-family-code);

            /* spacing */
            /* https://medium.com/dwarves-design/the-principle-of-spacing-in-ui-design-part-1-3354d0d65e51 */
            --spacing-xs: 6px;
            --spacing-sm: 12px;
            --spacing-md: 24px;
            --spacing-lg: 48px;

            /* elevation */
            --shadow-1: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.10) 0px 1px 3px 0px;
            --shadow-2: rgba(0, 0, 0, 0.10) 0px 1px 3px 0px, rgba(0, 0, 0, 0.10) 0px 1px 3px 0px;
            /* tailwind #37 https://getcssscan.com/css-box-shadow-examples */
            --shadow-3: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
            /* tailwind #38 https://getcssscan.com/css-box-shadow-examples */
            --shadow-4: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
            /* tailwind #40 https://getcssscan.com/css-box-shadow-examples */
            --shadow-5: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
            --shadow-6: rgba(0, 0, 0, 0.1) 0px -10px 15px -3px;

            /* globals */
            --mobile-navbar-height: 60px;
            --safe-area-bottom: env(safe-area-inset-bottom, 0px);
            --sidebar-width: 250px;
        }

        * {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizelegibility;
        }

        html {
            /* 1rem */
            font-size: 16px;
        }

        body {
            font: var(--p1);
            /* https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ */
            color: #444;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }

        .header {
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--neutral-200);
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font: var(--p);
            font-weight: 600;
            color: var(--neutral-900);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: var(--spacing-md);
            align-items: center;
        }

        .nav-link {
            color: var(--neutral-600);
            text-decoration: none;
            font: var(--sm);
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: var(--neutral-900);
        }

        .nav-link.active {
            color: var(--neutral-900);
            font-weight: 500;
        }

        .content-container {
            display: flex;
            min-height: calc(100vh - 80px);
            max-width: 1200px;
            margin: auto;
        }

        .sidebar {
            position: relative;
            width: var(--sidebar-width);
            background-color: white;
            border-right: 1px solid var(--neutral-200);
        }

        .sidebar-content {
            position: sticky;
            top: var(--spacing-lg);
            padding: var(--spacing-md);
        }

        .sidebar-nav {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-nav>li {
            margin-bottom: 8px;
        }

        .sidebar-nav-item {
            display: block;
            color: var(--neutral-600);
            text-decoration: none;
            padding: var(--spacing-xs) 0;
            font: var(--sm);
            font-weight: 400;
            transition: color 0.2s ease;
            border: none;
            background: none;
        }

        .sidebar-nav-item:hover {
            color: var(--neutral-900);
        }

        .sidebar-nav-sub {
            list-style: none;
            padding: 0;
            margin: 0 16px;
        }

        .sidebar-nav-sub .sidebar-nav-item {
            color: var(--neutral-500);
        }

        .sidebar-nav-sub .sidebar-nav-item:hover {
            color: var(--neutral-700);
        }

        :target {
            scroll-margin-top: 80px;
        }

        .content {
            flex: 1;
            padding: 0 40px;
            max-width: calc(100% - var(--sidebar-width));
        }

        section {
            margin-bottom: var(--spacing-lg);
        }

        .content {

            strong {
                font-weight: 600;
            }

            em {
                font-style: italic;
            }

            h1 {
                font: var(--h2);
                margin-bottom: 24px;
            }

            h2 {
                font: var(--h3);
            }

            h3 {
                font: var(--h5);
            }

            h4, h5, h6 {
                font: var(--h6);
            }

            p,
            blockquote,
            ul,
            li,
            table {
                font: var(--p1);
                padding: 3px 0;
            }

            a {
                color: var(--neutral-500);
                text-decoration: none;
                border-bottom: 1px dashed var(--neutral-500);
            }

            img {
                width: auto;
                max-width: 100%;
            }

            h1, h2, h3, h4, h5, h6 {
                padding: 3px 0;
                margin-top: 24px;
                margin-bottom: 4px;
                font-weight: 600;
            }

            code {
                font: var(--code);
                background-color: var(--neutral-50);
                border-radius: 4px;
                padding: 4px 8px;
            }

            pre {
                margin: 4px 0;
                padding: 12px;
                background-color: var(--neutral-50);
                border-radius: 4px;
                overflow: scroll;
                position: relative;

                &::-webkit-scrollbar {
                    display: none;
                }

                font: var(--code);
                line-height: 24px;
            }

            .code-block-container {
                position: relative;
            }

            .copy-code-button {
                position: absolute;
                top: 8px;
                right: 8px;
                padding: 6px;
                background-color: var(--neutral-100);
                border: 1px solid var(--neutral-300);
                border-radius: 4px;
                cursor: pointer;
                opacity: 0;
                transition: opacity 0.2s, background-color 0.2s;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .copy-code-button svg {
                width: 18px;
                height: 18px;
                stroke: var(--neutral-700);
            }

            .code-block-container:hover .copy-code-button {
                opacity: 1;
            }

            .copy-code-button:hover {
                background-color: var(--neutral-200);
            }

            .copy-code-button.copied {
                background-color: var(--neutral-700);
            }

            .copy-code-button.copied svg {
                stroke: white;
            }

            blockquote {
                border-left: 3px solid var(--neutral-700);
                padding-left: 10px;
                margin: 10px 4px;
            }

            ul {
                padding-left: 20px;
            }

            ul > li > ul {
                padding-top: 0;
                padding-bottom: 0;
            }

            li > ul > li {
                padding-bottom: 0;
            }

            ul.contains-task-list {
                padding-left: 0;
            }

            li.task-list-item {
                list-style-type: none;
            }

            table {
                width: 100%;
                border-collapse: collapse;
                margin: 24px 0;
            }

            table, th, td {
                border: 1px solid var(--neutral-200);
                padding: 5px 15px;
                width: max-content;
            }

            th {
                text-align: left;
            }

            hr {
                margin-top: 24px;
                margin-bottom: 24px;
                border: 1px solid var(--neutral-100);
            }

            s {
                color: var(--neutral-400);
            }

            mark {
                background: var(--yellow-100);
                border-radius: 4px;
                padding: 2px;
            }
        }

        @media (max-width: 1024px) {
            .content-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--neutral-200);
                padding: var(--spacing-md);
            }

            .content {
                max-width: 100%;
                padding: var(--spacing-md);
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                gap: var(--spacing-sm);
            }

            .sidebar-content {
                padding: 0;
            }

            .content {
                padding: var(--spacing-md);
            }
        }
    </style>
</head>

<body>
    <header class="header">
        <nav class="nav container">
            <a href="/zen" class="logo">Zen</a>
            <div class="nav-links">
                <a href="https://zendemo.fly.dev" class="nav-link">Demo</a>
                <a href="/documentation.html" class="nav-link active">Documentation</a>
                <a href="https://github.com/sheshbabu/zen" class="nav-link">GitHub</a>
            </div>
        </nav>
    </header>

    <div class="content-container">
        <aside class="sidebar">
            <div class="sidebar-content">
                <ul class="sidebar-nav">
                    <li>
                        <a href="#installation" class="sidebar-nav-item">Installation</a>
                        <ul class="sidebar-nav-sub">
                            <li><a href="#docker-compose" class="sidebar-nav-item">Docker Compose</a></li>
                            <li><a href="#build-from-scratch" class="sidebar-nav-item">Build from Scratch</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#keyboard-shortcuts" class="sidebar-nav-item">Keyboard Shortcuts</a>
                        <ul class="sidebar-nav-sub">
                            <li><a href="#global-shortcuts" class="sidebar-nav-item">Global</a></li>
                            <li><a href="#editor-shortcuts" class="sidebar-nav-item">Editor</a></li>
                            <li><a href="#navigation-shortcuts" class="sidebar-nav-item">Navigation</a></li>
                            <li><a href="#image-gallery-shortcuts" class="sidebar-nav-item">Image Gallery</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#backup" class="sidebar-nav-item">Backup</a>
                        <ul class="sidebar-nav-sub">
                            <li><a href="#backup-powershell" class="sidebar-nav-item">PowerShell</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#mcp-integration" class="sidebar-nav-item">MCP Integration</a>
                        <ul class="sidebar-nav-sub">
                            <li><a href="#mcp-generate-token" class="sidebar-nav-item">Generate Token</a></li>
                            <li><a href="#mcp-claude-code" class="sidebar-nav-item">Claude Code</a></li>
                            <li><a href="#mcp-lm-studio" class="sidebar-nav-item">LM Studio</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#templates" class="sidebar-nav-item">Templates</a>
                        <ul class="sidebar-nav-sub">
                            <li><a href="#templates-create" class="sidebar-nav-item">Creating Templates</a></li>
                            <li><a href="#templates-placeholders" class="sidebar-nav-item">Placeholders</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </aside>

        <main class="content">
            <section id="installation">
                <h1>Installation</h1>

                <h3 id="docker-compose">Docker Compose</h3>
                <p>
                    The easiest way to get started is using <code>Docker Compose</code>. This method requires
                    minimal setup and handles all dependencies automatically.
                </p>

                <h4>Prerequisites:</h4>
                <ul>
                    <li><code>Docker</code> and <code>Docker Compose</code> installed on your system</li>
                </ul>

                <h4>Installation steps:</h4>
                <ol>
                    <li>Create a new directory for your Zen installation:</li>
                    <pre><code class="language-bash">$ mkdir zen && cd zen</code></pre>
                </ol>

                <ol start="2">
                    <li>Create a <code>docker-compose.yml</code> file:</li>
                    <pre><code class="language-yaml">services:
  zen:
    image: ghcr.io/sheshbabu/zen/zen:latest
    container_name: zen
    network_mode: 'bridge'
    ports:
      - 8080:8080
    volumes:
      - /path/to/data:/data
      - /path/to/images:/images
    restart: 'unless-stopped'
</code></pre>
                </ol>



                <ol start="3">
                    <li>Start the application:</li>
                    <pre><code class="language-bash">$ docker compose up -d</code></pre>
                </ol>

                <ol start="4">
                    <li>Access Zen in your browser at <code>http://localhost:8080</code></li>
                </ol>

                <blockquote>
                    <p><strong>Note:</strong> Your notes and images will be stored in the <code>./data</code> and
                        <code>./images</code> directories respectively, ensuring your data persists between container
                        restarts.
                    </p>
                </blockquote>

                <h3 id="build-from-scratch">Build from Scratch</h3>
                <p>
                    For developers who want more control or need to modify the source code,
                    you can build Zen from the source repository.
                </p>

                <h4>Prerequisites:</h4>
                <ul>
                    <li>Go 1.23 or later</li>
                    <li>Git</li>
                    <li>esbuild</li>
                </ul>

                <h4>Build steps:</h4>
                <ol>
                    <li>Install tools:
                        <ul>
                            <li>Install <a href="https://go.dev/doc/install">Go</a></li>
                            <li>Install esbuild</li>
                        </ul>
                        <pre><code class="language-bash">$ go install github.com/evanw/esbuild/cmd/esbuild@latest</code></pre>
                    </li>
                </ol>

                <ol start="2">
                    <li>Clone the repository:</li>
                    <pre><code class="language-bash">$ git clone https://github.com/sheshbabu/zen.git
$ cd zen</code></pre>
                </ol>

                <ol start="3">
                    <li>Build the application:</li>
                    <pre><code class="language-bash">$ make build</code></pre>
                </ol>

                <ol start="4">
                    <li>Run the application:</li>
                    <pre><code class="language-bash">$ ./zen</code></pre>
                </ol>

                <ol start="5">
                    <li>Access Zen in your browser at <code>http://localhost:8080</code></li>
                </ol>
            </section>

            <section id="keyboard-shortcuts">
                <h1>Keyboard Shortcuts</h1>

                <p>
                    Shortcuts use <code>Ctrl</code> on Windows/Linux and <code>Cmd</code> on macOS.
                </p>

                <h3 id="global-shortcuts">Global Shortcuts</h3>
                <p>These shortcuts work from anywhere in the application:</p>

                <ul>
                    <li><code>Ctrl/Cmd + N</code> - Create a new note</li>
                    <li><code>Ctrl/Cmd + K</code> - Open search</li>
                    <li><code>Ctrl/Cmd + \</code> - Toggle editor width</li>
                    <li><code>Escape</code> - Close modals and dialogs</li>
                </ul>

                <h3 id="editor-shortcuts">Editor Shortcuts</h3>
                <p>These shortcuts work when editing notes:</p>

                <ul>
                    <li><code>Ctrl/Cmd + Enter</code> - Save note (or start editing when viewing)</li>
                    <li><code>Ctrl/Cmd + B</code> - Bold selected text</li>
                    <li><code>Ctrl/Cmd + Shift + H</code> - Highlight selected text</li>
                    <li><code>Tab</code> - Insert indentation (2 spaces)</li>
                    <li><code>Escape</code> - Close editor popup</li>
                </ul>

                <h3 id="navigation-shortcuts">Navigation Shortcuts</h3>
                <p>These shortcuts help you navigate through search results and suggestions:</p>

                <ul>
                    <li><code>Arrow Up/Down</code> - Navigate through search results</li>
                    <li><code>Enter</code> - Select highlighted search result or tag suggestion</li>
                    <li><code>Escape</code> - Close search or tag suggestions</li>
                    <li><code>Backspace</code> - Close tag suggestions when input is empty</li>
                </ul>

                <h3 id="image-gallery-shortcuts">Image Gallery Shortcuts</h3>
                <p>These shortcuts work when viewing images in the lightbox:</p>

                <ul>
                    <li><code>Escape</code> - Close the image lightbox</li>
                    <li><code>Arrow Left</code> - Navigate to previous image</li>
                    <li><code>Arrow Right</code> - Navigate to next image</li>
                </ul>

                <blockquote>
                    <p><strong>Tip:</strong> Most shortcuts work contextually, they only activate when you're in the relevant part of the interface.</p>
                </blockquote>
            </section>

            <section id="backup">
                <h1>Backup</h1>

                <h3 id="backup-powershell">PowerShell</h3>

                <p>
                    To back up your notes, you can use the following PowerShell script.
                    This script creates a timestamped backup of your SQLite database and verifies its integrity.
                </p>

                <pre><code class="language-powershell">$sourceDbPath  = "C:\path\to\data\zen.db"
$timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
$backupDbPath = "C:\path\to\backup\zen_backup_$timestamp.db" 

Write-Host "Backing up Zen..." 

sqlite3 $sourceDbPath ".backup '$backupDbPath'" 

Write-Host "`n--- Checking integrity of the backup database ---"
$integrityResult = sqlite3 $backupDbPath "PRAGMA integrity_check;"
$integrityResult = $integrityResult.Trim() 

if ($integrityResult -eq "ok") {
    Write-Host "Backup successful and verified: $backupDbPath"
    Write-Host "`n--- Checking for notes in the backup database ---"
    $notesCheckOutput = sqlite3 $backupDbPath "SELECT COUNT(*) FROM notes;"
    $notesCheckOutput = $notesCheckOutput.Trim() 

    if ($notesCheckOutput -match "^\d+$") {
        $notesCount = [int]$notesCheckOutput
        if ($notesCount -gt 0) {
            Write-Host "Notes table found with $notesCount rows."
        } else {
            Write-Host "Notes table exists but is empty (0 rows)."
        }
    } elseif ($notesCheckOutput -like "Error: no such table:*") {
        Write-Host "Notes table not found in the backup database."
    } else {
        Write-Host "Could not determine notes table status. SQLite output: '$notesCheckOutput'"
    } 

} else {
    Write-Host "Backup verification failed for: $backupDbPath"
    Write-Host "Integrity check result: '$integrityResult'"
} 

# Restart so the WAL file is created again
Write-Host "`nRestarting Zen..."
docker compose restart
</code></pre>
            </section>

            <section id="mcp-integration">
                <h1>MCP Integration</h1>

                <p>
                    Zen provides Model Context Protocol (MCP) integration, allowing you to connect with
                    external tools and services like Claude Code. This enables you to search, read,
                    and manage your notes directly from supported applications.
                </p>

                <h3 id="mcp-generate-token">Generate Token</h3>
                <p>
                    Before you can use MCP integration, you need to generate an access token:
                </p>

                <ol>
                    <li>Open Zen in your browser</li>
                    <li>Click on <strong>Settings</strong> in the sidebar</li>
                    <li>Click on the <strong>MCP</strong> tab</li>
                    <li>Click <strong>Generate Token</strong> to create a new access token</li>
                    <li>Copy the generated token - you'll need this for the next step</li>
                </ol>

                <h3 id="mcp-claude-code">Claude Code</h3>
                <p>
                    To integrate Zen with Claude Code, use the following command with the token you generated in the previous step:
                </p>

                <pre><code class="language-bash">$ claude mcp add --transport http zen-notes http://&lt;ZEN_URL&gt;/mcp --header "Authorization: Bearer &lt;TOKEN&gt;"</code></pre>

                <p>Replace <code>&lt;TOKEN&gt;</code> with the actual token you generated.</p>
                <br />

                <p>
                    Once configured, you can use Claude Code to:
                </p>

                <ul>
                    <li>Search through your notes</li>
                    <li>Read specific notes by ID</li>
                    <li>List all your notes</li>
                    <li>Access notes from your development workflow</li>
                </ul>

                <h3 id="mcp-lm-studio">LM Studio</h3>
                <p>
                    To integrate Zen with LM Studio, you can configure the MCP server in your LM Studio settings.
                    See the <a href="https://lmstudio.ai/docs/app/plugins/mcp#use-mcp-servers-in-lm-studio">LM Studio MCP documentation</a> for detailed setup instructions.
                </p>

                <p>Add the following configuration to your <code>mcp.json</code> file:</p>

                <pre><code class="language-json">{
  "mcpServers": {
    "zen-notes": {
      "url": "http://&lt;ZEN_URL&gt;/mcp",
      "headers": {
        "Authorization": "Bearer &lt;TOKEN&gt;"
      }
    }
  }
}
</code></pre>

                <p>Replace <code>&lt;TOKEN&gt;</code> with the actual token you generated.</p>
            </section>

            <section id="templates">
                <h1>Templates</h1>

                <p>
                    Templates let you create reusable note structures with dynamic placeholders.
                    They're perfect for recurring note types like daily journals, meeting notes, or project plans.
                </p>

                <h3 id="templates-create">Creating Templates</h3>
                <p>
                    To create a new template:
                </p>

                <ol>
                    <li>Click on <strong>Templates</strong> in the sidebar</li>
                    <li>Click the <strong>New</strong> button</li>
                    <li>Enter a template name (e.g., "Daily Journal", "Meeting Notes")</li>
                    <li>Optionally set a default note title</li>
                    <li>Write your template content using Markdown</li>
                    <li>Add tags if needed</li>
                    <li>Click <strong>Save</strong></li>
                </ol>

                <h3 id="templates-placeholders">Placeholders</h3>
                <p>
                    Templates support dynamic placeholders that are automatically replaced when creating a new note:
                </p>

                <ul>
                    <li><code>{{date}}</code> - Current date in YYYY-MM-DD format (e.g., 2025-01-15)</li>
                    <li><code>{{time}}</code> - Current time in HH:MM:SS format (e.g., 14:30:00)</li>
                    <li><code>{{datetime}}</code> - Current date and time (e.g., 2025-01-15 14:30:00)</li>
                    <li><code>{{datetime:FORMAT}}</code> - Custom datetime format using Go's time format</li>
                </ul>

                <h4>Custom Datetime Formats</h4>
                <p>You can use custom datetime formats with the <code>{{datetime:FORMAT}}</code> placeholder:</p>

                <ul>
                    <li><code>{{datetime:01/02/2006}}</code> - US date format (MM/DD/YYYY)</li>
                    <li><code>{{datetime:02-01-2006}}</code> - European date format (DD-MM-YYYY)</li>
                    <li><code>{{datetime:Monday, January 2, 2006}}</code> - Long date format</li>
                    <li><code>{{datetime:15:04}}</code> - 24-hour time without seconds</li>
                    <li><code>{{datetime:3:04 PM}}</code> - 12-hour time with AM/PM</li>
                </ul>

                <blockquote>
                    <p><strong>Format Reference:</strong> Go uses a reference time of
                        <code>Mon Jan 2 15:04:05 MST 2006</code> for formatting. Use these values to create your custom
                        format.
                    </p>
                </blockquote>

                <h4>Example Template</h4>
                <pre><code class="language-markdown"># Daily Journal - {{datetime:Monday, January 2, 2006}}

## Morning Reflection
- What am I grateful for today?

## Tasks
- [ ]

## Evening Notes
- What went well today?
- What could be improved?

---
Created at {{time}}
</code></pre>
            </section>


        </main>
    </div>

    <!-- Highlight.js -->
    <script src="highlight.min.js"></script>

    <!-- Copy code button functionality -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize syntax highlighting
            hljs.highlightAll();

            // Wrap all pre tags in a container and add copy buttons
            document.querySelectorAll('pre').forEach(function (pre) {
                var container = document.createElement('div');
                container.className = 'code-block-container';
                pre.parentNode.insertBefore(container, pre);
                container.appendChild(pre);

                var button = document.createElement('button');
                button.className = 'copy-code-button';
                button.setAttribute('aria-label', 'Copy code to clipboard');

                // Copy icon SVG
                button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';

                var checkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
                var copyIconSvg = button.innerHTML;

                button.addEventListener('click', function () {
                    var code = pre.textContent;
                    navigator.clipboard.writeText(code).then(function () {
                        button.innerHTML = checkIconSvg;
                        button.classList.add('copied');

                        setTimeout(function () {
                            button.innerHTML = copyIconSvg;
                            button.classList.remove('copied');
                        }, 2000);
                    }).catch(function (err) {
                        console.error('Failed to copy:', err);
                    });
                });

                container.appendChild(button);
            });
        });
    </script>

    <!-- mouji snippet -->
    <script>
        (function () {
            var COLLECT_URL = "https://mouji.fly.dev/collect";
            var PROJECT_ID = "4b8f80d61e65f0c6c954826d89646e4a";
            var GLOBAL_VAR_NAME = "__mouji__";

            window[GLOBAL_VAR_NAME] = {};

            window[GLOBAL_VAR_NAME].sendPageView = function () {
                var path = location.pathname;
                var title = document.title;
                var referrer = document.referrer;

                var url =
                    COLLECT_URL +
                    "?project_id=" +
                    PROJECT_ID +
                    "&title=" +
                    encodeURIComponent(title) +
                    "&path=" +
                    encodeURIComponent(path) +
                    "&referrer=" +
                    encodeURIComponent(referrer);

                var xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.send();
            };

            window[GLOBAL_VAR_NAME].sendPageView();
        })();
    </script>

</body>

</html>